<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src='./axios.min.js'></script>
    <script src='./jquery-1.10.2.min.js'></script>
    <script src='./vue.js'></script>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <input type="text" v-model='username'>
        <input type="text" v-model='password'>
        <button @click='post_data'>提交</button>

        <button @click='get_data'>校验</button>
    </div>
</body>
<script>
    // http://127.0.0.1:8000/login/
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
        },
        methods: {
            post_data: function(){
                let data_ = new FormData()
                data_.append('username',this.username)
                data_.append('password',this.password)
                axios({
                    url: 'http://127.0.0.1:8000/login/',
                    method: 'post',
                    data : data_,
                }).then( res => {
                    console.log(res)
                    localStorage.clear() // 清空本地存储区域
                    sessionStorage.clear() // 清空session区域
                    localStorage.username = res.data.username
                    localStorage.token = res.data.token
                    localStorage.user_id = res.data.user_id
                }).catch(error=>{
                    console.log('这是无效的验证')
                })
            },
            get_data: function(){
                let token = localStorage.token
                let data_ = new FormData()
                data_.append('token',token)
                axios({
                    url:'http://127.0.0.1:8000/verify/',
                    method: 'post',
                    data: data_,
                }).then(res=>{
                    console.log(res)
                }).catch(error=>{
                    console.log(error)
                })
            }
        },
    })
</script>

</html>